import React, {Component,Fragment} from 'react';
import {NavLink} from 'react-router-dom'
import { Card , Form, Input, Select, Button,Table, Space,message} from 'antd';
import {SearchOutlined,PlusCircleOutlined} from "@ant-design/icons";

import {reqProductList,reqUpdateStatus} from '../../api/index.js'
const { Option } = Select;
/**
 * 首页路由组件
 */
export default class Category extends Component {
	state = {
		data:[],
		total:0,
		current:1,
	}
	onFinish=()=>{
		console.log(111);
	}

	componentDidMount=()=>{
		this.getProductList()
	}
	// 更新状态数据多的时候，直接更改对应的状态，数据少的时候，直接请求即可。
	updateProductStatus=async(id,productStatus)=>{
		 let dataSource = [...this.state.data];
		   productStatus = productStatus === 1 ? 2 : 1;
		const {data,status,msg} = await reqUpdateStatus(id,productStatus);
		if (status === 0) {
		    message.success('商品更新状态成功', 2);
		    dataSource = dataSource.map(item => {
		        if (item._id === id) {
		            item.status = productStatus;
		        }
		        return item;
		    })
		    this.setState({data:dataSource})
		} else {
		    message.error(msg, 2);
		}
		
	}
	getProductList= async(num=1)=>{
	  let res = await reqProductList(num,15)
	   const {status,data} = res
        if(status===0){
        	this.setState({
				data: data.list,
				total:data.total,
				current:data.pageNum
		  });
        }
	}

	
    render() {
		const {data,total} = this.state
		const columns = [
		  {
		    title: '商品名称',
		    dataIndex: 'name',
		    key: 'name',
		    render: text => <a>{text}</a>,
			width: "10%",
			align: 'left'
		  },
		  {
		    title: '商品描述',
		    dataIndex: 'desc',
		    key: 'desc',
			align: 'left'
		  },
		  {
		    title: '价格',
		    dataIndex: 'price',
		    key: 'price',
			width: "10%",
			align: 'center'
		  },
		  {
		   title: '状态',
		   render: (item) => {
		       const {_id: id, status} = item;
		       return (
		           <Fragment>
		               <Button type={status === 1 ? 'danger' : 'primary'} onClick={() => {
		                   this.updateProductStatus(id, status)
		               }}>{status === 1 ? '下架' : '上架'}</Button>
		               <span>{status === 1 ? '在售' : '已停售'}</span>
		           </Fragment>
		       )
		   },
		   key: 'status',
		   width: "5%",
		   align: 'center'
		  },
		  {
		    title: '操作',
		    key: 'operator',
			render: (item) => {
			
				const {_id:id} = item;
				const obj = item
				return(
				<Space>
				  <NavLink to={{pathname: '/admin/products/product/view', state: {obj}}}>
				   <Button type="link">详情</Button>	
				  </NavLink>
				    <NavLink to={{pathname: '/admin/products/product/AddUpdate', state: {id}}}>
				     <Button type="link">修改</Button>	
				   </NavLink>  	
				</Space>
				)
			},
			width: "5%",
			align: 'center'
		  },
		];
		
		// const data = [
		//   {
		//     key: '1',
		// 	_id:1,
		//     name: '电脑',
		//     age: '用于平时办公和追剧',
		//     address: 6999,
		//     tags: ['下架', '在售'],
		//   },
		// ];
		// 受控组件
        return (
            <div>
                 <Card title={
					 <div>
					   <Select defaultValue="name">
					     <Option value="name">按名称搜索</Option>
						 <Option value="desc">按描述搜索</Option>
					   </Select>
					   <Input style={{margin:'0px 10px',width:'20%'}}
					   placeholder="请输入搜索关键字"
					   allowClear/>
					   <Button type="primary">搜索</Button>
					 </div>
				 }
				 extra={<NavLink to={{pathname: "/admin/products/product/addUpdate", state: {}}}>
                      <Button type="primary" icon={<PlusCircleOutlined/>}>添加</Button>
					  </NavLink>}
				 >
                      
						  
						  <Table columns={columns} dataSource={data}  bordered  pagination={{
							  total:this.state.total,
							  pageSize:5,
							  current:this.state.current,
							  onChange:this.getProductList
						  }}
    />
                    </Card>
            </div>
        );
    }
}